<template>
  <div class="home page-tab">
    <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" :leftArrow="false"/>
    <div class="haveBgc">
      <div class="infoBox">
        <img
          v-if="userInfo.avatar"
          :src="`${apiBaseUrlDownload}jksaas-mgt/mgt/sys/common/static2/${userInfo.avatar}`"
          alt=""
          @click="changeAvatar"
        />
        <div v-else class="infoLeft" @click="changeAvatar">
          <p>{{ userInfo.shortName || userInfo.realname }}</p>
        </div>
        <div class="infoRight">
          <div class="rightTop">{{ userInfo.realname }}</div>
          <div class="rightBot">
            {{ userInfo.roleNames }}
          </div>
        </div>
      </div>

      <div class="messageBox">
        <van-cell-group class="formItemFlex">
          <p class="label FormTit"><span></span>账号</p>
          <div class="haveUnitBox">
            <van-field
              v-model="userInfo.username"
              readonly
              input-align="right"
            />
          </div>
        </van-cell-group>
        <div class="bottomLine"></div>
        <van-cell-group class="formItemFlex">
          <p class="label FormTit"><span></span>手机号</p>
          <div class="haveUnitBox">
            <van-field
              v-model="userInfo.phone"
              readonly
              input-align="right"
            />
          </div>
        </van-cell-group>
        <div class="bottomLine"></div>
        <van-cell-group class="formItemFlex">
          <p class="label FormTit"><span></span>所在部门</p>
          <div class="haveUnitBox">
            <van-field
              v-model="userInfo.departNames"
              readonly
              input-align="right"
            />
          </div>
        </van-cell-group>
        <div class="bottomLine"></div>
        <van-cell-group class="formItemFlex">
          <p class="label FormTit"><span></span>组织信息</p>
          <div class="haveUnitBox">
            <van-field
              v-model="userInfo.tenantName"
              readonly
              input-align="right"
            />
          </div>
        </van-cell-group>
      </div>

      <div class="ctrBox">
        <van-cell-group  class="formItemFlex">
          <p class="label FormTit"><span></span>修改密码</p>
          <div class="haveUnitBox">
            <van-field
              input-align="right"
              is-link
              readonly
              name="picker"
              @click="routerChange('/changePassWords')"
            />
          </div>
        </van-cell-group>
        <div class="bottomLine"></div>
        <van-cell-group  class="formItemFlex">
          <p class="label FormTit"><span></span>关于我们</p>
          <div class="haveUnitBox">
            <van-field
              input-align="right"
              is-link
              readonly
              name="picker"
              @click="routerChange('/aboutUs')"
            />
          </div>
        </van-cell-group>
      </div>

      <van-button class="button" type="default" @click="logOut" :loading="loadingOut">退出登录</van-button>
    </div>
    <!-- 修改头像 -->
    <fileSelectorPic
      style="width: 0;height: 0;overflow: hidden;"
      iconType="fj"
      title=""
      @fileChange="setFileList"
      :fileIds="attachment"
      ref="fileSelectorRef"
    >
    </fileSelectorPic>
    <TabBar></TabBar>
  </div>
</template>

<script>
import Vue from 'vue'
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import { mapActions } from "vuex";
import { apiBaseUrlDownload } from "@/utils/request";
import {PLATFORM_BROWSER} from '@/store/mutation-types'
import {
  getUserPersonInfo
} from "@/api/api";
import { getAction } from "@/api/manage";
import fileSelectorPic from "@/components/fileSelectorPic.vue";

export default {
  components: { Navbar, TabBar, fileSelectorPic },
  data() {
    return {
      title: "我的",
      apiBaseUrlDownload,
      rtitle: "",
      rname: "", //search
      userInfo: {},
      loadingOut: false,
      BROWSER: true,
      attachment: ''
    };
  },
  created() {
    this.BROWSER = Vue.ls.get(PLATFORM_BROWSER) == 'BROWSER';
    getUserPersonInfo().then((res) => {
      if(res.code == 200) {
        this.userInfo = res.result

        if(res.result.realname && !res.result.avatar) {
          let realNameWidth = res.result.realname.length
          if(realNameWidth > 2) {
            let shortName = res.result.realname.substring(realNameWidth - 2, realNameWidth)
            this.userInfo['shortName'] = shortName
          }
        }
      }
    })
  },
  methods: {
    ...mapActions(["Logout"]),
    logOut() {
      this.loadingOut = true
      this.$store.dispatch("Logout").then(() => {
        this.$router.replace('/user/login')
      });
    },
    routerChange(type) {
      this.$router.push({ path: type });
    },
    // 头像点击事件
    changeAvatar() {
      this.$refs.fileSelectorRef.show = true
    },
    // 上传头像回调
    setFileList(file) {
      getAction(`/sys/user/addUserImage?avatar=${file}`).then(res => {
        if (res.success) {
          this.$toast('用户头像修改成功');
          getUserPersonInfo().then((res) => {
            if(res.code == 200) {
              this.userInfo = res.result

              if(res.result.realname && !res.result.avatar) {
                let realNameWidth = res.result.realname.length
                if(realNameWidth > 2) {
                  let shortName = res.result.realname.substring(realNameWidth - 2, realNameWidth)
                  this.userInfo['shortName'] = shortName
                }
              }
            }
          })
        } else {
          this.$toast(res.message);
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
.haveBgc {
  background-color: #f2f2f6;
  box-sizing: border-box;
  height: calc(100vh - 180px);
}
div.infoBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #f2f2f6;
  img {
    width: 240px;
    height: 240px;
    border-radius: 48px;
    padding: 40px;
  }
  .infoLeft {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    margin: 40px;
    background-color: #409eff;
    p {
      font-size: 32px;
      color: #fff;
      text-align: center;
      line-height: 160px;
    }
  }

  div.infoRight {
    height: 110px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    div.rightTop {
      font-size: 32px;
      font-weight: 500;
      color: #191f25;
    }

    div.rightBot {
      box-sizing: border-box;
      padding: 6px 8px;
      font-size: 24px;
      color: #5a5a5a;
    }
  }
}
div.itemBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 44px 30px;
  background-color: #f5f8ff;
  margin-top: 32px;
  div.itemLeft {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img.leftImg {
      width: 44px;
      height: 44px;
      margin-right: 16px;
    }

    div.leftText {
      font-size: 32px;
      font-weight: 500;
      color: #191f25;
    }
  }
}
.explanBox {
  font-size: 22px;
  color: #888888;
  line-height: 36px;
  text-align: center;
  margin-top: 50px;
}
.messageBox {
  margin: 20px 0;
}
.ctrBox {
  margin: 20px 0;
}
.formItemFlex {
  display: flex;
  flex-direction: row;
  .FormTit {
    flex: 1;
    min-width: 3.3rem;
    padding-top: 0.33rem;
    font-size: 26px !important;
  }
  .haveUnitBox {
    flex: 1;
    .van-cell {
      width: 6.2rem;
    }
    /deep/ .van-field__control {
      font-size: 26px;
      color: #969799;
    }
  }
}
.bottomLine {
  height: 1px;
  background-color: #f2f2f2;
  margin: 0 2px;
}
.button {
  width: 100%;
  margin-top: 20px;
}
/deep/.van-overlay {
  z-index: 999998 !important;
}
/deep/.van-popup--bottom {
  z-index: 999999 !important;
  background: none;
  bottom: 12px;
  left: 40px;
  width: 90%;
}
/deep/ .van-action-sheet__gap {
  background: none;
}
/deep/.van-popup--bottom.van-popup--round {
  border-radius: 0;
}
.van-action-sheet__content {
  border-radius: 18px;
}
.van-action-sheet__cancel {
  border-radius: 18px;
}
</style>
